<template>
  <div class="nav-footer">
    <ul class="clear-fix">
        <li>                          
            <router-link exact to="/">
              <span class="iconfont icon-shouye"></span>
              首页
            </router-link>
        </li>
        <li>     
            <router-link to="/fitness" >
              <span class="iconfont icon-jianshen-"></span>
              健身
            </router-link>
               
        </li>
        <li>    
            <router-link to="/find" >
              <span class="iconfont icon-bulb"></span>
              发现
            </router-link>
                 
        </li>
        <li>    
            <router-link to="/mine" >
              <span class="iconfont icon-shouye"></span>
              我的
            </router-link>
          
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "FootNav"
};
</script>
<style scoped lang="less">
.nav-footer{
  font-size:0.8rem;
  width: 100%;
  position: fixed;
  bottom:0;
  left: 0;
  background-color: #000;
  padding:5px 0;
}
.clear-fix{
  height: 2rem;
  width: 100%;
  display: flex;
  width: 100%;
  background-color: #000;
  overflow:hidden;
}
li{
  float: left;
  flex-grow:1; 
  text-align: center;
 
}
li a{
  display: block;
  color: #e3e3e3;
}
.actives{
  color:#FED906;
 
}
span{
  display: block;
}
.iconfont{
  // color:#FED906;
  font-size:1rem;

}

</style>